<template>
	<view class="main">
		<u-avatar class="avatar" :src="userPicSrc" size="140" mode="circle"></u-avatar>
		<view class="name">{{userName}}</view>
		<view class="tips">
			*为了您的账号安全 请绑定您的手机号*
		</view>
		<u-form :model="form" ref="uForm" class="form">
			<u-form-item label-width="100" prop="name" label="姓名" class="label">
				<u-input v-model="form.name" placeholder="请输入姓名" />
			</u-form-item>
			<u-form-item label-width="100" prop="mobile" label="手机号" class="label">
				<u-input v-model="form.mobile" placeholder="请输入手机号" />
			</u-form-item>
			<u-form-item label-width="100" prop="captcha" label="验证码" class="label">
				<u-input v-model="form.captcha" placeholder="请输入验证码" />
				<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange">
				</u-verification-code>
				<u-button size="mini" style="color: #2979ff;" plain @tap="getCode">{{tips}}</u-button>
			</u-form-item>
			<u-button style="margin: 40rpx 0;" type="primary" shape="circle" @click="submit">确认绑定</u-button>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userPicSrc: "",
				userName: "",
				openid: '',
				tips: "",
				seconds: 60,
				form: {
					mobile: "",
					captcha: "",
				},
				rules: {
					mobile: [{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					captcha: [{
						required: true,
						message: '请输入验证码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		onBackPress(event) {
			this.$u.vuex('vuex_token', '');
			uni.navigateBack({
				delta: 1
			})
			return true
		},
		onLoad(options) {
			this.userPicSrc = options.avatar
			this.userName = options.name
			this.openid = options.openid
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let data = {
							avatar: this.userPicSrc,
							nickname: this.userName,
							openid: this.openid,
							...this.form
						}
						this.$u.api.bindByMobeil(data).then(res => {
							if (res.code == 1) {
								this.$u.toast("绑定成功！")
								this.$u.vuex('vuex_token', res.data.token)
								// uni.switchTab({
								// 	url: "/pages/list/list"
								// })
								this.$Router.push({name:"list"})
							} else {
								this.$u.toast(res.msg)
							}
						})
					}
				})
			},
			codeChange(text) {
				this.tips = text
			},
			getCode() {
				//手机格式校验
				if (!this.$u.test.mobile(this.form.mobile)) {
					this.$refs.uToast.show({
						title: "请输入正确的手机号",
						type: 'error',
					});
					this.form.mobile = ""
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					// 后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					let data = {
						mobile: this.form.mobile,
						event: "mobilelogin",
					}
					this.$u.api.send(data).then(res => {
						uni.hideLoading();
						if (res.code == 1) {
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							this.$u.toast(res.msg)
						}
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},

		}
	}
</script>

<style>
	.main {}

	.avatar {
		display: flex;
		margin: 100rpx auto 0;
		justify-content: center;
	}

	.name {
		font-size: 30rpx;
		text-align: center;
	}

	.tips {
		margin: 20rpx 0;
		text-align: center;
		font-size: 26rpx;
		color: rgba(0, 0, 0, .5);
	}

	.form {
		padding: 50rpx;
	}
</style>
